0<template>
    <div class="recordPageIcon">
        <div class="iconBox">
            <i :class="changeLike" @click="like"></i>
            <i class="iconfont2 icon-xiazai"></i>
            <div class="comment" @click="commentJump(comment,detail)">
                <i class="iconfont2 icon-pinglun"></i>
                <p>{{commentStyle}}</p>
            </div>
            <i class="iconfont2 icon-gengduo"></i>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
           islike:false
        }
    },
    props:["comment","detail"],
    methods: {
        like(){
            this.islike = !this.islike;
            this.$http.get("/like",{
                params:{
                    id:347230,
                    like:this.islike
                }
            }).then(res=>{
                console.log(res)
            })
        },
        commentJump(comment,detail){
            this.$router.push({
                name:"musicPlayPageComment",
                params:{
                    comment,
                    detail
                }
            })
        }
    },
    computed: {
        changeLike(){
            return this.islike?"iconfont2 icon-msnui-love":"iconfont2 icon-heart"
        },
        commentStyle(){
            return this.comment.total>=100000?"10w+":this.comment.total>=10000?"1w+":this.comment.total>=1000?"999+":this.comment.total
        }
    },
}
</script>

<style lang="scss" scoped>
    @import "~@/assets/css/common.scss";
    .recordPageIcon{
        .iconBox{
            padding: 0 vw(80) 0;
            display: flex;
            width: 100%;
            justify-content: space-between;
            align-items: center;
            transform: rotate3d(0,0,0,0);
            i{
                font-size: vw(22);
                color: white;
            }
            .comment{
                width: vw(34);
                height: vw(34);
                position: relative;
                line-height: vw(30);
                i{
                    font-size: vw(24);
                }
                p{
                    font-size: vw(12);
                    position: absolute;
                    top: 0;
                    right: 0;
                    color: white;
                    line-height: 1em;
                }
            }
            .icon-msnui-love{
                color: #fd0808;
            }
        }
    }

</style>